<template>
  <div class="cart">
  <nav-bar class="nav">
    <div slot="center">购物车({{length}})</div>
  </nav-bar>
    <scroll class="content" :pull-up-load="true" ref="scroll">
  <Cartlist></Cartlist>
    </scroll>
    <CartBottomBar :length="length"></CartBottomBar>
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import Cartlist from "@/views/cart/Cartlist";
  import {mapGetters} from 'vuex'
  import Scroll from "@/components/common/scroll/scroll";
  import CartBottomBar from "@/views/cart/CartBottomBar";
  export default {
    name: "Cart",
    components:{
      CartBottomBar,
      Scroll,
      NavBar,
      Cartlist,
    },
    computed:{
      // ...mapGetters(['cartLength'])
      ...mapGetters({
        length:'cartLength'
      })
    },
    activated() {
      this.$refs.scroll.scroll.refresh()
    }
  }
</script>

<style scoped>
.nav{
  background-color: var(--color-tint);
  color: var(--color-background);
  font-weight: 700;
}
.content{
  height: calc(100% - 44px - 49px);
  overflow: hidden;
}
.cart{
  height:100vh;
}
</style>
